import React, {Component} from 'react';
import {Grid} from '@icedesign/base';
import './BaseSafeItem.scss';
import BaseModifyPwd from '../BaseModifyPwd';
import BaseModifyPhone from '../BaseModifyPhone';
import BaseBindPhone from './BaseBindPhone';
import BaseBindEmail from './BaseBindEmail';
import BaseModifyEmail from '../BaseModifyEmail';
import API from '../../../../../../tools/API';

const {Row, Col} = Grid;

/**
*  安全设置
*/
export default class BaseSafeItem extends Component{
  constructor(props) {
     super(props);
     this.state = {
       user:{}
     }
     this.getUserInfo = this.getUserInfo.bind(this);
  }

  //查询用户信息
  //初始化
  componentWillMount(){
    //获取当前登录用户信息
    this.getUserInfo();
  }

  getUserInfo(){
    //获取当前登录用户信息
    API.getUserInfo().then((res) => {
      this.state.user = res.result;
      this.state.isLoading = false;
      this.setState(this.state);
    })
  }

  render(){
    let phone = this.state.user.phone;
    let email = this.state.user.email;
    if (phone != undefined) {
      phone = phone.replace(/^(\d{4})\d{4}(\d+)/,"$1****$2");
    }else {
      phone = "未绑定";
    }
    if (email != undefined) {
      email = email.substr(0,3)+'***'+'@'+email.split('@')[1];
    }else {
      email = "未绑定";
    }

    return(
      <div>
       <div className="base-safe-item-main">
          <Row justify='center'>
            <Col span='12'>
              <div className="title">账户密码</div>
            <div className="info">当前密码：********</div>
            </Col>
            <Col span='12' style={{textAlign:'right'}}>
              <div className="edit">
                <BaseModifyPwd />
              </div>
            </Col>
          </Row>
        </div>
        <div className="base-safe-item-main">
          <Row justify='center'>
            <Col span='12'>
              <div className="title">账户手机</div>
            <div className="info">已绑定手机：{phone}</div>
            </Col>
            <Col span='12' style={{textAlign:'right'}}>
              <div className="edit">
                {
                  this.state.user.phone == undefined || this.state.user.phone == '' ?
                    <BaseBindPhone reload={this.getUserInfo} />
                  :
                    <BaseModifyPhone phone={this.state.user.phone} reload={this.getUserInfo} />
                }
              </div>
            </Col>
          </Row>
        </div>
        <div className="base-safe-item-main">
          <Row justify='center'>
            <Col span='12'>
              <div className="title">账户邮箱</div>
            <div className="info">已绑定邮箱：{email}</div>
            </Col>
            <Col span='12' style={{textAlign:'right'}}>
              <div className="edit">
                {
                  this.state.user.email == undefined || this.state.user.phone == ""?
                    <BaseBindEmail reload={this.getUserInfo} />
                  :
                    <BaseModifyEmail email={this.state.user.email} reload={this.getUserInfo} />
                }
              </div>
            </Col>
          </Row>
        </div>
      </div>
    )
  }

}
